<template>
  <div v-if="type === 'video'" class="video row justify-center items-center">
    <q-img :src="coverImage" class="cover-image" @click="gotoVideo">
      <q-tooltip
        color="sub"
        anchor="center right"
        self="center left"
        :offset="[-5, 0]"
        >{{ name }}</q-tooltip
      >
    </q-img>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
  videoId: {
    type: String,
    default: '',
  },
  userId: {
    type: String,
    default: '',
  },
  playlistId: {
    type: String,
    default: '',
  },
  coverImage: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: '',
  },
  name: {
    type: String,
    default: '',
  },
});
function gotoVideo() {
  router.replace({
    name: 'Video',
    params: {
      id: props.videoId,
    },
  });
}
</script>
<style lang="scss" scoped>
.video {
  width: 100%;
  height: 48px;

  .cover-image {
    width: 56px;
    height: 32px;
    border-radius: 5px;
  }
}
</style>
